/*
 * @Author: lihui
 * @Date:   2016-10-12 09:16:05
 * @Last Modified by:   lihui
 * @Last Modified time: 2016-10-16 14:25:52
 */

'use strict';
$(function(){

    // 轮播图
    //var index=0;
    //var w=$('#banner_width').width();
    //var lis = $("#banner_ul").children();
    //var distance = $("#banner_ul").offsetWidth;

    // 点击对应大图
    // 1. 获取所有的li标签,注册单击事件
    $("#banner_ul a").on("click",function () {
        $("#banner_img").attr("src", $(this).attr("href"));
        return false;
    });

    // 放大镜
    // 准备工作  获取元素
    var small = document.getElementById("enlarge");
    //
    var smallImg = small.children[0];
    var mask = small.children[1];
    //
    var big = document.getElementById("big");
    //
    var bigImg = big.children[0];
//    console.log(bigImg);
//    var width

    //1 鼠标移动到盒子中，显示黄色盒子和大盒子
    small.onmouseover = function () {
        mask.style.display  = "block";
        big.style.display = "block";
    };
    small.onmouseout = function () {
        mask.style.display  = "none";
        big.style.display = "none";
    };
    $("#banner_ul a").click(function () {
        $("#big img").attr("src", $(this).attr("href"));
        //$("#des").text($(this).attr("title"));
        return false;
    });

    //2 鼠标在盒子中移动的时候黄色的盒子跟着移动
    small.onmousemove = function (e) {
        //让mask跟着鼠标移动
        //鼠标的位置 - 盒子的位置 = 鼠标在盒子中的位置
        //鼠标在盒子中的位置 - mask大小的一半  ==  mask的位置，鼠标在mask中间显示
        var x = e.pageX - small.offsetLeft - mask.offsetWidth / 2;
        var y = e.pageY - small.offsetTop - mask.offsetHeight / 2;

        //控制mask不越界
        if(x < 0) {
            x = 0;
        }

        if(y < 0) {
            y = 0;
        }

        if(x > small.offsetWidth - mask.offsetWidth) {
            x = small.offsetWidth - mask.offsetWidth
        }
        if( y > small.offsetHeight - mask.offsetHeight) {
            y = small.offsetHeight - mask.offsetHeight
        }

        mask.style.left = x + "px";
        mask.style.top = y + "px";

        //3 黄色盒子移动，看对应的大图
        //mask的移动距离/ mask的最大移动距离 = 大图片的移动距离/大图片的最大移动距离
        // maskX / maxMaskX = bigImgX / maxBigImgX

        var bigImgX = -x * (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth)-180;
        var bigImgY = y * (bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight);

//        var a = bigImg.offsetWidth - big.offsetWidth;
//        console.log(a);

        bigImg.style.left = - bigImgX + "px";
        bigImg.style.top = - bigImgY + "px";
    };

    // 购物车 数量加减
    var index=1;
    $("#btn1").on("click",function() {
        index--;
        if(index >=1) {
            $("#btnText").val(function() {
                this.innerHTML = index;
            });
        }
    });
    $("#btn2").on("click",function() {
        index++;
        if(index >=1) {
            $("#btnText").val(function() {
                this.innerHTML = index;
            });
        }
    });

});    
    